<template>
  <div class="w-full h-full flex flex-col bg-gray-100 bg-gray-100 mt-1px">
    <n-card>
      <n-form
          inline
          :label-width="80"
          label-placement="left"
          :model="formValue"
          :rules="rules"
          :size="size"
          ref="formRef"
      >
        <n-grid x-gap="12" :cols="4">
          <n-gi>
            <n-form-item label="参数名称" path="name" class="w-200px">
              <n-input v-model:value="formValue.name" placeholder="输入参数名称"/>
            </n-form-item>
          </n-gi>
          <n-gi>
            <n-form-item label="参数值" path="value" class="w-200px">
              <n-input placeholder="输入参数值" v-model:value="formValue.value"/>
            </n-form-item>
          </n-gi>
          <n-gi>
          </n-gi>
          <n-gi>
            <n-form-item class="w-200px">
              <n-button-group>
                <n-button @click="handleSearch">
                  <n-icon>
                    <Search32Filled></Search32Filled>
                  </n-icon>
                  查询
                </n-button>
                <n-button>
                  <n-icon>
                    <ArrowReset32Filled></ArrowReset32Filled>
                  </n-icon>
                  重置
                </n-button>
                <n-button @click="handleCreate">
                  <n-icon>
                    <Add16Filled></Add16Filled>
                  </n-icon>
                  新建
                </n-button>
              </n-button-group>
            </n-form-item>
          </n-gi>
        </n-grid>
      </n-form>
    </n-card>
    <div class="flex-1 w-full flex overflow-hidden">
      <n-card class="w-200px h-full">
        <n-tree
            block-line
            :data="treedata"
            selectable
            remote
            :node-props="nodeProps"
            :on-load="handleLoad"
        />
      </n-card>
      <n-card class="w-full h-full">
        <flextable :column.sync="columns" :tabledata="tabledata"></flextable>
      </n-card>
    </div>
    <n-card class="w-full juzhong1">
      <fenye @change="getDataList" ref="fenyeref" :total="total"></fenye>
    </n-card>
    <model ref="modalref" :treedata="treedata" @shuaxin="shuaxin"></model>
  </div>
</template>

<script setup name="dictmanager">
import {useRoute, useRouter} from "vue-router";
import {Add16Filled, ArrowReset32Filled, Search32Filled} from "@vicons/fluent"
import {NButton} from "naive-ui"
import http from "@/request/request"
import model from "./model.vue"

const router = useRouter()
const route = useRoute()
const formRef = ref(null)
const modalref = ref(null)
const fenyeref = ref(null)
//表单数据
const formValue = ref({})
const rules = ref({})
const size = ref("medium")
const tabledata = ref([
  {name: "1"},
  {name: "1"},
  {name: "1"},
  {name: "1"},
])    // 表格数据
const treedata = ref([])    // 树形数据
const total = ref(0)
const columns = ref([
  {
    title: "序号", key: "index", show: true, render: (rowData, rowIndex) => {
      return rowIndex
    }
  },
  {title: "名称", key: "name", show: true,},
  {title: "参数值", key: "value", show: true},
  {title: "排序", key: "sort", show: true},
  {
    title: "创建时间", key: "createdTime", show: true, render: (rowData, rowIndex) => {
      return new Date(rowData["createdTime"]).toLocaleString("zh", {
        year: 'numeric',
        month: 'numeric',
        day: 'numeric',
        hour12: false,
        hour: 'numeric',
        minute: 'numeric',
        second: 'numeric'
      })
    }
  },
  {title: "描述", key: "desc", show: true},
  {
    title: "详情", key: "action", width: "60", show: true, render: (rowData, rowIndex) => {
      return h(NButton, {
        onClick: () => {
          handleView(rowData)
        }, size: "small", class: {"mx-1": true}, type: "primary"
      }, {
        default: () => {
          return "详情"
        }
      })
    }
  },
  {
    title: "编辑", key: "action", width: "60", show: true, render: (rowData, rowIndex) => {
      return h(NButton, {
        onClick: () => {
          handleEdit(rowData)
        }, size: "small", class: {"mx-1": true}, type: "info"
      }, {
        default: () => {
          return "编辑"
        }
      })
    }
  },
  {
    title: "删除", key: "action", width: "60", show: true, render: (rowData, rowIndex) => {
      return h(NButton, {
        onClick: () => {
          handleDelete(rowData)
        }, size: "small", class: {"mx-1": true}, type: "error"
      }, {
        default: () => {
          return "删除"
        }
      })
    }
  },
  // {
  //   title: "更多", key: "action",width:"60", show: true, render: (rowData, rowIndex) => {
  //     return  h(NButton, {size: "small", class: {"mx-1": true}}, {
  //         default: () => {
  //           return "更多"
  //         }
  //       })
  //   }
  // },
])
const selectkey = ref("")   // 左侧树形数据中当前选中的ID
// 树形数据的点击回调
const nodeProps = ({option}) => {
  return {
    onClick() {
      selectkey.value = option.key
      // 根据选中的ID，刷新列表数据
      getDataList()
    },
  }
}

// 点击查询
const handleSearch = () => {
  fenyeref.value.changeoption({page: 1})
}
// 点击新建
const handleCreate = () => {
  modalref.value.init("add")
}
// 点击查看
const handleView = (data) => {
  modalref.value.init("view", {...data})
}
// 点击编辑
const handleEdit = (data) => {
  modalref.value.init("edit", {...data})
}
// 点击删除
let deletemodel = inject("deletemodel")
const handleDelete = (item) => {
  deletemodel(refreshdelete, http.lanmudelete, item.id, item.name)
}
// 回到上一页的刷新方法
const refreshdelete = () => {
  const page = fenyeref.value.page
  if (page > 1 && tableData.value.length === 1) {
    fenyeref.value.changeoption({page: page - 1})
  }
  fenyeref.value.changeoption({})
}

// 想后台获取表格数据
const getDataList = () => {
  const config = {
    parent: selectkey.value,
    ...formValue.value,
  }
  http.zidianlist(config).then(res => {
    if (res.data.code === 0) {
      tabledata.value = res.data.items
      total.value = res.data.total
    }
  })
}
// 向后台获取树形数据
const getTreeData = () => {
  const config = {}
  http.zidianlist(config).then(res => {
    if (res.data.code === 0) {
      treedata.value = res.data.items.map(item => {
        return {label: item.name, key: item.id, value: item.id,isLeaf:false}
      })
    }
  })
}
// 获取字典
const handleLoad = (option) => {
  return new Promise((resolve) => {
    const config = {
      parent: option.key,
    }
    http.zidianfilter(config).then(res => {
      if (res.data.code === 0) {
        if (res.data.items.length === 0) {
          option.isLeaf = true
          console.log("处理完毕1", option)
        } else {
          option.children = res.data.items.map(item => {
            return {label: item.name, key: item.id, isLeaf: false,}
          })
          console.log("处理完毕2", option)
        }
        resolve()
      }
    })
  })
}

// 弹窗关闭回调
const shuaxin = () => {
  getTreeData()
  fenyeref.value.changeoption({})
}
// 初始化区域
getTreeData()
</script>

<style scoped>

</style>
